<template>
	<div class="bg">
		<div class="zzc" v-if="showzzc" @click="close"></div>
		<div class="container">
			<div class="title">待付款统计分析</div>

			<div class="box">
				<div class="box_top">
					<div class="box_top_left" style="padding: 20px;">
						<table style="width: 100%;text-align: center;">
							<tr>
								<th class="tcent">年份</th>
								<th class="tcent">合同金额</th>
								<th class="tcent">待付款</th>
								<th class="tcent">已付款</th>
							</tr>
							<tr v-for="item in list" @click="gettime(item.name)">
								<td>{{item.name}}</td>
								<td>{{item.count}}</td>
								<td>{{item.need}}</td>
								<td>{{item.has}}</td>
							</tr>
						</table>
					</div>
					<div class="box_top_left">
						<div class="echart" ref="timelong"></div>
					</div>
				</div>

				<div class="table">
					<div class="table_top">
						<div class="table_title">{{year}}年合同明细</div>
						<!-- <div class="top_btns">
								<div class="export" @click="export2Excel" v-if="$permissions.indexOf(85)  != -1">导出</div>
								<div class="print" @click="tabshow=true">打印</div>
							</div> -->
					</div>
					<el-table id="table" :data="tableData" style="width: 100%" :default-sort="{prop: 'code'}">
						<el-table-column prop="code" label="合同编号" sortable>
						</el-table-column>
						<el-table-column prop="agreementName" label="合同名称" sortable>
						</el-table-column>
						<el-table-column prop="partb" label="乙方" sortable>
						</el-table-column>
						<el-table-column prop="signDate" label="签订日期" sortable>
						</el-table-column>
						<el-table-column prop="sumMoney" label="合同金额" sortable>
						</el-table-column>
						<el-table-column prop="hasPay" label="已付款" sortable>
						</el-table-column>
						<el-table-column prop="needPay" label="待付款" sortable>
						</el-table-column>
					</el-table>
					<div class="page_box">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
							layout="total, sizes, prev, pager, next, jumper" :total="inglen">
						</el-pagination>
					</div>
				</div>
			</div>

		</div>
		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "",
		data() {
			return {
				tableData: [],
				list: [],
				ax: [],
				ay: [],
				bx: [],
				by: [],
				need: [],
				date: "",
				year2: "",
				year: "",
				month: "",
				date1: "",
				date2: "",
				options_show: false,
				showzzc: false,
				options_show3: false,
				showloading: false,
				inglen: 0,
				page: 1,
				limit: 10
			}
		},
		mounted() {
			this.timeFormate();
			this.getnum();

			// this.getlist();
		},

		methods: {
			handleSizeChange(val) {
				this.limit = val
				this.getlist()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getlist()
			},
			//显示当前时间（年月日时分秒）
			timeFormate(timeStamp) {
				console.log(timeStamp)
				let year = ''
				let month = ''
				let date = ''
				if (timeStamp) {
					year = new Date(timeStamp).getFullYear();
					month = new Date(timeStamp).getMonth() + 1
					date = new Date(timeStamp).getDate()
					// return year + "-" + month + "-" + date;
				} else {
					year = new Date().getFullYear();
					month = new Date().getMonth() + 1
					date = new Date().getDate()
					this.date1 = new Date()
					this.date2 = new Date()
				}
				this.year = year;
				this.month = month;
				this.date = date;
				this.getlist(this.year);
				this.gettime(this.year);
			},
			gettime(name) {
				this.year = name
				this.showloading = true
				var that = this
				var param = {
					year: this.year
				}
				this.$http.post(this.$url + '/xm/statistic/hasPay/month', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.bx = []
						that.by = []
						for (var i = 0; i < response.data.data.length; i++) {
							that.bx[i] = response.data.data[i].name ? response.data.data[i].name : ''
							that.by[i] = parseFloat(response.data.data[i].has)
							that.need[i] = parseFloat(response.data.data[i].need)
						}
						// console.log(that.by)
						that.showloading = false
						that.gettimelong();
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			getlist(name) {
				this.showloading = true
				var that = this
				var param = {
					year: name,
					// isPay: 1,
					page: this.page,
					limit: this.limit,
				}
				this.$http.post(this.$url + '/xm/statistic/selectList2', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.tableData = response.data.data
						that.inglen = response.data.count
						that.showloading = false
						that.gettimelong();
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			getnum() {
				this.showloading = true
				var that = this
				this.$http.get(this.$url + '/xm/statistic/hasPay/year')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data
						that.showloading = false
						// that.getbar();
					})
					.catch(function(error) {
						console.log(error);
					});
			},

			gettimelong() {
				var dom = this.$refs.timelong
				var myChart = this.$echarts.init(dom, null, {
					renderer: 'canvas',
					useDirtyRect: false
				});
				var app = {};

				var option;

				option = {
					title: {
						text: "按月统计",
						top: 0,
						textStyle: {
							fontSize: 16,
							color: "#626262",
						},
						// padding: 17,
						left: 14
					},
					grid: {
						top: 70,
						left: 20,
						right: 20,
						bottom: 9,
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: [{
						type: 'category',
						data: this.bx,
						axisLabel: {
							interval: 0,
							// rotate: 30
						}
					}],
					yAxis: [{
						type: 'value',
						name: '金额',
						min: 0,
						nameRotate: this.by.length == 0 ? 1 : 0,
						// max: 72,
						// interval: 12,

						axisLabel: {
							formatter: function(param) {
								// console.log(param.toString())
								var num = param.toString()
								// console.log(num.length)
								if (num.length > 8) {
									return num.substring(0, 8) + '...元'
								} else {
									return num + '元'
								}
								// '{param}小时'
							},
						}

					}],
					series: [{
						name: "已付款",
						barMaxWidth: 20,
						data: this.by,
						type: 'bar',
						stack: 'has',
						itemStyle: {
							color: '#527cff',
						},
					}, {
						name: "待付款",
						barMaxWidth: 20,
						data: this.need,
						stack: 'need',
						type: 'bar',
						itemStyle: {
							color: '#ff6600',
						},
					}]
				};

				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}

				window.addEventListener('resize', myChart.resize);
			},


		}
	}
</script>
<style scoped>
	.search {
		display: flex;
		margin-bottom: 30px;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}

	/deep/ .el-input__icon {
		line-height: 34px;
	}

	/deep/ .el-table .el-table__cell {
		text-align: center;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(1) {
		text-align: left;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(2) {
		text-align: left;
	}

	.table_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 23px;
		margin-bottom: 11px;
	}

	.table_title {
		font-size: 16px;
		font-weight: bold;
		color: #626262;
	}

	.top_btns {
		display: flex;
	}

	.top_btns div {
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height: 28px;
		border-radius: 3px;
		width: 63px;
		height: 28px;
		margin-left: 13px;
		cursor: pointer;
	}

	.print {
		background: #32B16C
	}

	.export {
		background: #5BC0DE;
	}

	.bg {
		background: #f6f6f6;
		min-height: 100vh;
	}

	.box_top_left {
		padding-top: 17px;

		width: 49%;
		background-color: #fff;
	}

	.echart {
		width: 100%;
		height: 370px;
	}

	.box_top {
		display: flex;
		justify-content: space-between;
		margin-top: 17px;
	}

	.box {
		-ms-overflow-style: none !important;
	}

	.box::-webkit-scrollbar {
		display: none;
	}

	.box {
		width: 100%;

		overflow-y: scroll;
		height: calc(100vh - 116px);
	}

	/deep/ .el-input--prefix .el-input__inner {
		height: 34px;
		padding: 0 8px;
	}

	.input-cont:hover .clears {
		display: block;
	}

	.clears {
		width: 10px;
		position: absolute;
		right: 35px;
		top: 14px;
		display: none;
		cursor: pointer;
	}

	.el-input__inner {
		width: 114px;
		height: 34px;
		background: #F6F6F6;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
	}
</style>
